<template>
  <a-menu class="nav-menu-container" v-model="currentRouter" mode="horizontal">
    <a-menu-item v-for="item in menus" :key="item.name">
      <nuxt-link :to="item.path">{{item.text}}</nuxt-link>
    </a-menu-item>
  </a-menu>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';
  import { INavMenu } from '@/models/nav-menu.model';

  @Component
  export default class NavMenuComponent extends Vue {
    @Prop({ type: Array, required: true })
    readonly menus!: INavMenu[];

    get currentRouter(): string[] {
      const matchRouter = this.menus.find(d => d.path !== '/' && this.$route.path.startsWith(d.path));
      if (matchRouter) {
        return [matchRouter.name];
      }

      return [this.$route.name!];
    }
  }
</script>

<style lang="scss" scoped>
  .nav-menu-container {
    flex: 1;
    border-bottom: none;
    height: 60px;
    line-height: 58px;
    font-size: 16px;
  }
</style>
